<template>
  <base-layout>
    <template #searchPanel>
      <el-form
        ref="fromdata1"
        :model="fromdata"
        :rules="rules"
        label-width="100px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">供应商信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="供应商名称:" prop="supplierName">
              <el-input
                clearable
                v-model="fromdata.supplierName"
                placeholder="供应商名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商编码:" prop="supplierCode">
              <el-input
                clearable
                v-model="fromdata.supplierCode"
                placeholder="供应商编码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商类别:" prop="supplierType">
              <el-select
                clearable
                disabled
                ref="dragSelect"
                v-model="fromdata.supplierType"
                class="drag-select"
              >
                <el-option
                  v-for="item in dictArray['供应商类型']"
                  :key="item.id"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="所属城市:" prop="cityCode">
              <CitySelect v-model="fromdata.cityCode" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属区县:" prop="countyCode">
              <District
                :cityCode="fromdata.cityCode"
                v-model="fromdata.countyCode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属门店:" prop="storeId">
              <JobShop clearable v-model="fromdata.storeId" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="联系人:" prop="contactName">
              <el-input
                clearable
                v-model="fromdata.contactName"
                placeholder="联系人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:" prop="contactPhone">
              <el-input
                clearable
                v-model.number="fromdata.contactPhone"
                placeholder="联系电话"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="供应商地址:" prop="address">
              <el-input
                clearable
                v-model="fromdata.address"
                placeholder="请输入地址，100字以内"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="主营业务:" prop="note">
              <el-input
                type="textarea"
                placeholder="主营业务"
                :rows="2"
                clearable
                v-model="fromdata.note"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注信息:">
              <el-input
                type="textarea"
                placeholder="备注信息"
                :rows="2"
                clearable
                v-model="fromdata.remark"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-form
        ref="fromdata"
        :model="fromdata"
        :rules="rules"
        label-width="100px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">经营信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="公司全称:" prop="companyName">
              <el-input
                clearable
                v-model="fromdata.companyName"
                placeholder="公司全称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司法人:" prop="companyJuridical">
              <el-input
                clearable
                v-model="fromdata.companyJuridical"
                placeholder="公司法人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="统一社会信用代码:"
              prop="companyCode"
              label-width="130px"
            >
              <el-input
                clearable
                v-model="fromdata.companyCode"
                placeholder="统一社会信用代码"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="成立日期:" prop="companyFoundingTime">
              <el-date-picker
                v-model="fromdata.companyFoundingTime"
                type="date"
                placeholder="成立日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" align="right" justify="center">
            <el-button
              v-permission="
                !$route.params.id ? authConfig.add : authConfig.edit
              "
              type="success"
              @click="saveUpdate"
              >保存</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  updateData,
  addData,
  details,
} from '@/api/pre-sale/supplierManage/supplierManage'
import CityDistrictSelector from '@/components/CityDistrictSelector/index'
import { getDict, parseTimeToYMDHMS } from '@/utils'
import { phoneCheck } from '@/utils/rulesFunction'
import { rules } from './rules/index'

export default {
  components: {
    CityDistrictSelector,
  },
  mixins: [
    baseMixin({
      addData: addData,
      updateData: updateData,
      format(res) {
        return res.map((data) => {
          return data
        })
      },
    }),
  ],
  data() {
    return {
      authConfig: {
        add: 'supplier:create',
        edit: 'supplier:update',
      },
      fromdata: {
        status: true,
        supplierName: '', // 供应商名称
        supplierCode: '', // 供应商编码
        supplierType: '整车供应商', // 供应商类别
        cityCode: '', // 城市编码
        countyCode: '', // 区县编码
        storeId: '',
        id: '',
        contactName: '', // 联系人
        contactPhone: '', // 联系电话
        address: '', // 供应商地址
        note: '', // 主营业务
        remark: '', // 备注信息
        companyName: '', // 公司全称
        companyJuridical: '', // 公司法人
        companyCode: '', // 统一社会信用代码
        companyFoundingTime: '', // 成立日期
      },
      rules: {
        ...rules,
      },
      dictArray: [],
    }
  },
  methods: {
    // 监听城市区县组件返回值
    cityValue(value) {
      this.fromdata.cityCode = value[0]
      this.fromdata.countyCode = value[1]
    },

    saveUpdate() {
      this.$refs['fromdata1'].validate((valid) => {
        this.$refs['fromdata'].validate((validate) => {
          if (valid && validate) {
            let options = this.fromdata
            options.companyFoundingTime = options.companyFoundingTime
              ? parseTimeToYMDHMS(options.companyFoundingTime)
              : ''
            this.saveSuppierData()
          }
        })
      })
    },

    async saveSuppierData() {
      const { success } = this.fromdata.id
        ? await updateData(this.fromdata)
        : await addData(this.fromdata)
      if (success) {
        this.$message({
          message: '操作成功',
          type: 'success',
        })
        this.$router.push({ path: '/supplierManage/vehicleSupplierManage' })
      } else {
        this.$message.error('操作失败')
      }
    },
    // 查询详情
    async detail(id) {
      let { data } = await details(id)
      this.fromdata = data
    },
  },
  mounted() {
    this.dictArray = getDict(['供应商类型'])
    const id = this.$route.query && this.$route.query.id
    if (id) {
      this.fromdata.id = id
      this.detail(id)
    }
  },
}
</script>
<style lang="scss" scoped>
</style>
